// Reset styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  line-height: var(--line-height-base);
  color: var(--text-color);
}

body {
  background-color: var(--background-color-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Links
a {
  color: var(--primary-color);
  text-decoration: none;
  @include hover-opacity;
}

// Text selection
::selection {
  background: var(--primary-color);
  color: #fff;
}

// Scrollbar
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background-color-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  
  &:hover {
    background: rgba(0, 0, 0, 0.3);
  }
}

// Common utility classes
.text-ellipsis {
  @include text-ellipsis;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

// Spacing utilities
.m {
  &t {
    &-sm { margin-top: var(--spacing-sm); }
    &-md { margin-top: var(--spacing-md); }
    &-lg { margin-top: var(--spacing-lg); }
    &-xl { margin-top: var(--spacing-xl); }
  }
  &b {
    &-sm { margin-bottom: var(--spacing-sm); }
    &-md { margin-bottom: var(--spacing-md); }
    &-lg { margin-bottom: var(--spacing-lg); }
    &-xl { margin-bottom: var(--spacing-xl); }
  }
  &l {
    &-sm { margin-left: var(--spacing-sm); }
    &-md { margin-left: var(--spacing-md); }
    &-lg { margin-left: var(--spacing-lg); }
    &-xl { margin-left: var(--spacing-xl); }
  }
  &r {
    &-sm { margin-right: var(--spacing-sm); }
    &-md { margin-right: var(--spacing-md); }
    &-lg { margin-right: var(--spacing-lg); }
    &-xl { margin-right: var(--spacing-xl); }
  }
}

.p {
  &t {
    &-sm { padding-top: var(--spacing-sm); }
    &-md { padding-top: var(--spacing-md); }
    &-lg { padding-top: var(--spacing-lg); }
    &-xl { padding-top: var(--spacing-xl); }
  }
  &b {
    &-sm { padding-bottom: var(--spacing-sm); }
    &-md { padding-bottom: var(--spacing-md); }
    &-lg { padding-bottom: var(--spacing-lg); }
    &-xl { padding-bottom: var(--spacing-xl); }
  }
  &l {
    &-sm { padding-left: var(--spacing-sm); }
    &-md { padding-left: var(--spacing-md); }
    &-lg { padding-left: var(--spacing-lg); }
    &-xl { padding-left: var(--spacing-xl); }
  }
  &r {
    &-sm { padding-right: var(--spacing-sm); }
    &-md { padding-right: var(--spacing-md); }
    &-lg { padding-right: var(--spacing-lg); }
    &-xl { padding-right: var(--spacing-xl); }
  }
}

// Text colors
.text {
  &-primary { color: var(--primary-color); }
  &-success { color: var(--success-color); }
  &-warning { color: var(--warning-color); }
  &-error { color: var(--error-color); }
  &-info { color: var(--info-color); }
  &-secondary { color: var(--text-color-secondary); }
  &-disabled { color: var(--disabled-color); }
}

// Background colors
.bg {
  &-primary { background-color: var(--primary-color); }
  &-success { background-color: var(--success-color); }
  &-warning { background-color: var(--warning-color); }
  &-error { background-color: var(--error-color); }
  &-info { background-color: var(--info-color); }
  &-base { background-color: var(--background-color-base); }
  &-light { background-color: var(--background-color-light); }
}

// Responsive utilities
.hidden {
  &-xs {
    @include responsive(xs) {
      display: none !important;
    }
  }
  &-sm {
    @include responsive(sm) {
      display: none !important;
    }
  }
  &-md {
    @include responsive(md) {
      display: none !important;
    }
  }
  &-lg {
    @include responsive(lg) {
      display: none !important;
    }
  }
  &-xl {
    @include responsive(xl) {
      display: none !important;
    }
  }
  &-xxl {
    @include responsive(xxl) {
      display: none !important;
    }
  }
}